<template>
  <div>
    <div class="others">
      <div class="gongshi">其他信息</div>
      <div v-show="isEnd">
        <el-alert
          v-if="isSuccess"
          title="其他信息上传成功"
          type="success"
          effect="dark"
        >
        </el-alert>
        <el-alert v-else title="其他信息上传失败！" type="error" effect="dark">
        </el-alert>
      </div>
      <el-form
        ref="otherForm"
        :model="otherForm"
        label-width="130px"
        :rules="rules"
        status-icon
      >
        <el-form-item label="受捐者编号" prop="recipientId">
          <el-input
            v-model="otherForm.recipientId"
            prop="recipientId"
          ></el-input>
        </el-form-item>
        <el-form-item label="情况说明">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            v-model="otherForm.desc"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <input type="button" id="btn" value="点击上传图片" />
          <input
            id="img"
            style="opacity: 0"
            type="file"
            @change="showImg($event)"
            ref="file"
            name="file"
          />
        </el-form-item>
        <el-form-item label="图片文件">
          <div style="width: 200px">
            <img width="100%" :src="imgSrc" />
          </div>
          <div>{{ fileName }}</div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button @click="resetForm('otherForm')">重置</el-button>
          <el-button @click="backRouter">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { uploadOtherInfo } from "network/charity";
export default {
  name: "OtherInfoOfStu",
  data() {
    return {
      isSuccess: false,
      isEnd: false,
      rules: {
        //   表单输入验证
        recipientId: [
          {
            required: true,
            message: "受捐助者编号输入有误",
            pattern: /^[1-9]\d{9}$/,
            trigger: "blur"
          }
        ]
      },
      //   证书公示提交信息
      otherForm: {
        recipientId: "",
        desc: "",
        file: ""
      },
      fileName: "",
      imgSrc: ""
    };
  },
  methods: {
    //   提交表单
    /**
     * @author 代季盖
     */
    onSubmit() {
      let form = this.otherForm;
      for (let key in this.otherForm) {
        if (this.otherForm[key] === "") {
          this.$message({
            showClose: true,
            message: "请确认信息是否无误!",
            type: "error"
          });
          return;
        }
      }
      console.log(form);
      let formData = new FormData();
      formData.append("recipientId", form.recipientId);
      formData.append("file", form.file);
      formData.append("othersText", form.desc);
      console.log(formData);
      this.uploadOtherInfo(formData);
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    /**
     * @author 代季盖
     */
    showImg(e) {
      // 显示图片
      let file = e.target.files[0];
      this.imgSrc = window.URL.createObjectURL(file);
      this.fileName = file.name;
      this.otherForm.file = file;
    },
    /**@author 代季盖 */
    uploadOtherInfo(formdata) {
      uploadOtherInfo(formdata)
        .then(res => {
          if (res.msg == "success") {
            this.isEnd = true;
            this.isSuccess = true;
          } else {
            this.$message({
              showClose: true,
              message: "其它信息上传失败",
              type: "error"
            });
          }
        })
        .catch(err => {});
    },
    backRouter() {
      this.$router.go(-1);
    }
  },
  created() {
    this.otherForm.recipientId = this.$route.query.id;
  }
};
</script>
<style lang="scss" scoped>
.others {
  width: 60vw;
  margin-left: 20vw;
  margin-top: 5px;
  margin-bottom: 20px;
  padding: 20px;
  background-color: rgb(255, 255, 255);
  border-radius: 3px;
  box-shadow: 0px 0px 8px rgb(200, 192, 184);
}
.el-form-item {
  // display: inline-block;
  width: 50%;
}
.gongshi {
  // width: 80px;
  color: red;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-left: 2vw;
  background-color: rgb(255, 255, 255);
  font-size: 20px;
  font-weight: bold;
}

#img {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
#text {
  color: black;
}

#btn {
  margin-left: -4vw;
  padding: 5px 10px;
  background: #00b0f0;
  color: #fff;
  border: none;
  border-radius: 5px;
}
</style>
